<template>
  <div>
    <BaseSearch :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
    <BaseTable :columns="columns" v-bind="table">
      <template slot-scope="scope" slot="amount">
        <span>{{ scope.row.amount | separatorMoney }}</span>
      </template>
      <template slot-scope="scope" slot="repayAmount">
        <span>{{ scope.row.repayAmount | separatorMoney }}</span>
      </template>
      <template slot-scope="scope" slot="repayInterest">
        <span>{{ scope.row.repayInterest | separatorMoney }}</span>
      </template>
      <template slot-scope="scope" slot="notRepayAmount">
        <span>{{ scope.row.notRepayAmount | separatorMoney }}</span>
      </template>
    </BaseTable>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch/index.vue'
import BaseTable from '@/components/BaseTable/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import { PAYMENT_STATUS } from '@/constants/enterpriseModel.js'

const service = async params => {
  const { records, total } = await http.get('/drawdowns/records', {
    params: { ...params, listType: 2 },
  })

  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'repaymentHistoryList',
  components: {
    BaseSearch,
    BaseTable,
  },
  mixins: [FormTableMixin(service)],
  data() {
    const isCanDetail = this.$checkAccess('MENU_REPAYMENT_HISTORY_DETAIL')
    return {
      searchConfig: [
        { component: 'input', prop: 'searchStr', label: '搜索', placeholder: '企业名称' },
        {
          component: 'select',
          prop: 'fundCode',
          label: '所属资方',
          options: [],
        },
        {
          component: 'select',
          prop: 'appCode',
          label: '所属项目',
          options: [],
        },
        {
          component: 'select',
          prop: 'repayStatus',
          label: '状态',
          options: [
            { label: '部分还款', value: 1 },
            { label: '全部还款', value: 2 },
          ],
        },
      ],
      columns: [
        { label: '支用流水', prop: 'drawdownNo' },
        { label: '企业名称', prop: 'tenantName' },
        {
          label: '产品名称',
          prop: 'productName',
        },
        {
          label: '所属项目',
          prop: 'appName',
        },
        {
          label: '所属资方',
          prop: 'fundName',
        },
        {
          label: '支用金额(元)',
          prop: 'amount',
        },
        {
          label: '还款本金(元)',
          prop: 'repayAmount',
        },
        { label: '利息(元)', prop: 'repayInterest', showTip: true, tipContent: '历史还款利息总和' },
        {
          label: '待还金额(元)',
          prop: 'notRepayAmount',
        },
        {
          label: '状态',
          prop: 'repayStatus',
          render: (val, row) => {
            return <span>{PAYMENT_STATUS[row.repayStatus]}</span>
          },
        },
        {
          label: '操作',
          render: (val, row) => {
            return (
              <div>
                {isCanDetail && (
                  <el-button
                    type="text"
                    onClick={() => {
                      this.goDetail(row)
                    }}>
                    还款明细
                  </el-button>
                )}
              </div>
            )
          },
        },
      ],
    }
  },
  methods: {
    goDetail(item) {
      this.$router.push({ name: 'repaymentHistoryDetail', query: { drawdownId: item.id } })
    },
    // 获取来源
    async getSourceListRequest() {
      const sourceList = await this.$http.get(`/app/list`, { isLoading: false })
      if (sourceList && sourceList.length) {
        const list = sourceList.map(item => {
          return {
            label: item.name,
            value: item.code,
          }
        })
        this.searchConfig[2].options = [...list]
      }
    },
    // 资方列表
    async getfundsListRequest() {
      const res = await this.$http.get('/funds/list', { isLoading: false })
      if (res && res.length) {
        this.searchConfig[1].options = res.map(item => {
          return {
            label: item.name,
            value: item.code,
          }
        })
      }
    },
  },
  mounted() {
    this.getSourceListRequest()
    this.getfundsListRequest()
  },
}
</script>

<style lang="scss" scoped></style>
